<template>
  <div class="p-6px">
    <el-card class="rounded-md" shadow="never" style="min-height: 830px">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane :label="item.name" :name="item.key" v-for="(item, index) in data" :key="index">
          <div v-if="activeName === item.key">
            <component @handle-submit="handleClick" :name="item.name" :config-key="item.key" :is="item.component" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="configPage">
import { ref,markRaw } from "vue";
import ali_pay_config from "./components/ali_pay_config.vue";
import balance_config from "./components/balance_config.vue";
import logistics_query_config from "./components/logistics_query_config.vue";
import mall_basis_config from "./components/mall_basis_config.vue";
import sms_config from "./components/sms_config.vue";
import sms_template_config from "./components/sms_template_config.vue";
import user_level_config from "./components/user_level_config.vue";
import wechat_pay_config from "./components/wechat_pay_config.vue";
import wx_mini_program from "./components/wx_mini_program.vue";
import refund_config from "./components/refund_config.vue";
import { setConfig } from "@/api/system/config";
import { koiMsgError, koiMsgSuccess } from "@/utils/koi";

let data = ref<any>([
  {
    name: "商城基础设置",
    key: "MALL_BASIS_CONFIG",
    component: markRaw(mall_basis_config)
  },
  {
    name: "用户等级设置",
    key: "USER_LEVEL_CONFIG",
    component: markRaw(user_level_config)
  },
  {
    name: "小程序配置",
    key: "MINI_PROGRAM_CONFIG",
    component: markRaw(wx_mini_program)
  },
  {
    name: "物流查询配置",
    key: "LOGISTICS_QUERY_CONFIG",
    component: markRaw(logistics_query_config)
  },
  {
    name: "短信配置",
    key: "SMS_CONFIG",
    component: markRaw(sms_config)
  },
  {
    name: "短信模板配置",
    key: "SMS_TEMPLATE_CONFIG",
    component: markRaw(sms_template_config)
  },
  {
    name: "支付宝配置",
    key: "ALI_PAY_CONFIG",
    component: markRaw(ali_pay_config)
  },
  {
    name: "微信支付配置",
    key: "WECHAT_PAY_CONFIG",
    component: markRaw(wechat_pay_config)
  },
  {
    name: "余额支付配置",
    key: "BALANCE_CONFIG",
    component: markRaw(balance_config)
  },
  {
    name: "售后退款",
    key: "REFUND_CONFIG",
    component: markRaw(refund_config)
  }
]);

const activeName = ref(data.value[0].key);

const handleClick = (form: any) => {
  setConfig({
    key: activeName.value,
    value: form
  })
    .then(() => {
      koiMsgSuccess("操作成功");
    })
    .catch(() => {
      koiMsgError("操作异常");
    });
};
</script>

<style lang="scss" scoped></style>
